<template>
	<!-- 卡券 -->
	<view>
		<u-navbar title="表单" placeholder :autoBack="true" leftIconColor="#333" bgColor="#FFFFFF"
			:titleStyle="titleStyle">
		</u-navbar>
		<view class="cenV">
			<u-swiper :list="tulist"></u-swiper>
			<view class="fmiao">
				<u-parse :content="info.content"></u-parse>
			</view>
			<view class="flist">
				<view class="fitem" v-for="(item,index) in list" :key="index">
					<text class="fname">{{ index+1 }}. {{item.name}}</text>
					<view class="fda">
						<view class="daitem" v-if="item.type=='radio'" v-for="(i,ind) in item.type_descnew" :key="ind" @click="getxuan(item,index,ind)">
							<image class="quan" src="/mine/static/quans.png" v-if="i.isselect" mode=""/>
							<image class="quan" src="/mine/static/quan.png" v-else mode=""/>
							<text>{{i.name}}</text>
						</view>
					</view>
					<view class="fda">
						<view class="daitem" v-if="item.type=='checkbox'" v-for="(i,ind) in item.type_descnew" :key="ind"  @click="getxuan(item,index,ind)">
							<image class="quan" src="/mine/static/fangs.png" v-if="i.isselect" mode=""/>
							<image class="quan" src="/mine/static/fang.png" v-else mode=""/>
							<text>{{i.name}}</text>
						</view>
					</view>
				</view>
				<!-- <view class="fitem">
					<text class="fname">2. 您通过何种渠道了解到JOY舞蹈中心？</text>
					<view class="fda">
						<view class="daitem">
							<image class="quan" src="/mine/static/fang.png" mode=""/>
							<text>减肥塑身</text>
						</view>
						<view class="daitem">
							<image class="quan" src="/mine/static/fang.png" mode=""/>
							<text>提高气质</text>
						</view>
						<view class="daitem">
							<image class="quan" src="/mine/static/fang.png" mode=""/>
							<text>学习才艺</text>
						</view>
						<view class="daitem">
							<image class="quan" src="/mine/static/fang.png" mode=""/>
							<text>社交娱乐</text>
						</view>
					</view>
				</view>
				<view class="fitem">
					<text class="fname">3. 以下哪种描述符合您的情况？</text>
					<view class="fda">
						<view class="daitem dtwo">
							<image class="quan" src="/mine/static/quans.png" mode=""/>
							<text>在舞蹈普拉提中心附近居住</text>
						</view>
						<view class="daitem dtwo">
							<image class="quan" src="/mine/static/quan.png" mode=""/>
							<text>在舞蹈普拉提中心附近上学</text>
						</view>
						<view class="daitem dtwo">
							<image class="quan" src="/mine/static/quan.png" mode=""/>
							<text>在舞蹈普拉提中心附近工作</text>
						</view>
					</view>
				</view> -->

				<view class="lianxi">联系方式</view>
				<view class="lmaio">这对您非常重要；如果您记得宣传、接待您的课程顾问 名字，请填写（名字、电话或微信）以便更好为您提供 咨询服务！</view>

				<view class="xlist">
					<view class="xitem">
						<text class="xming">1. 姓名 <text class="xing">*</text></text>
						<view class="shuview">
							<image class="ren" src="/mine/static/ren.png" mode=""/>
							<u--input
								placeholder="请输入"
								border="none"
								v-model="parms.name"
							></u--input>
						</view>
					</view>
					<view class="xitem">
						<text class="xming">2. 性别<text class="xing">*</text></text>
						<view class="fda" style="margin-top: 13px;">
							<view class="daitem dthree" @click="getgerder(1)">
								<image class="quan" src="/mine/static/quans.png" mode="" v-if="parms.gender==1"/>
								<image class="quan" src="/mine/static/quan.png" mode="" v-else/>
								<text>男</text>
							</view>
							<view class="daitem dthree" @click="getgerder(2)">
								<image class="quan" src="/mine/static/quans.png" mode="" v-if="parms.gender==2"/>
								<image class="quan" src="/mine/static/quan.png" mode="" v-else/>
								<text>女</text>
							</view>
							<view class="daitem dthree" @click="getgerder(3)">
								<image class="quan" src="/mine/static/quans.png" mode="" v-if="parms.gender==3"/>
								<image class="quan" src="/mine/static/quan.png" mode="" v-else/>
								<text>保密</text>
							</view>
						</view>
					</view>
					<view class="xitem">
						<text class="xming">3. 手机 <text class="xing">*</text></text>
						<view class="shuview">
							<image class="ren" src="/mine/static/ren.png" mode=""/>
							<u--input
								placeholder="请输入"
								border="none"
								v-model="parms.phone"
							></u--input>
						</view>
					</view>
					<view class="xitem">
						<text class="xming">4. 微信 <text class="xing">*</text></text>
						<view class="shuview">
							<image class="ren" src="/mine/static/wxin.png" mode=""/>
							<u--input
								placeholder="请输入"
								border="none"
								v-model="parms.weixin"
							></u--input>
						</view>
					</view>
					<view class="xitem">
						<text class="xming">5. 邮箱 <text class="xing">*</text></text>
						<view class="shuview">
							<image class="ren" src="/mine/static/xin.png" mode=""/>
							<u--input
								placeholder="请输入"
								border="none"
								v-model="parms.email"
							></u--input>
						</view>
					</view>
					<view class="xitem">
						<text class="xming">6. 邮寄地址 <text class="xing">*</text></text>
						<text class="xmiao">您的地址对我们来说非常重要，请尽量留下有效的地址， 以便您抽取幸运奖品，我们及时邮寄给您~</text>
						<view class="shuview">
							<!-- <image class="ren" src="/mine/static/xin.png" mode=""/> -->
							<u--input
								placeholder="请输入"
								border="none"
								v-model="parms.adress"
							></u--input>
						</view>
					</view>

					<view class="tijiao" @click="gettijiao">提交</view>
				</view>
			</view>
		</view>
		
		<!-- <view  v-if="dataList.length==0" class="noV">
			<image src="../../static/me/no_card.svg"></image>
			<view>暂无数据</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#333"
				},
				dataList: [],
				shareData: {},
				mPage: 1,
				scrollTop: 0,
				triggered: false,
				mRoleId:"",
				tulist: [
					// 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                    // 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                    // 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				value: '',
				id:'',
				info:{},
				list:[],
				parms:{
					weixin:'',//
					email:'',
					phone:'',
					id:'',
					name:'',
					json:[],
					adress:'',
					gender:1,//gender 性别 1男 2女 3保密
					share_id:''
				},
				shopId:'',//分享人id
				//[{"id":2,"name":"您通过何种渠道了解到舞蹈中心","value":"微信","type":"radio"},{"id":15,"name":"您加入舞蹈中心的目的是什么？（可多选）","value":"减肥塑身,提高气质","type":"checkbox"},{"id":34,"name":"说出改正的方向","value":"方向1","type":"input"}]
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.parms.id = e.id
			if(e.userid){
				this.parms.share_id = e.userid;
			}
			
			this.getinfo();
		},
		onShareAppMessage: function(res) {
			// console.log("开始分享接收参数--->" + JSON.stringify(res))
			let shopId = this.id;
			let userId = uni.getStorageSync("user_info_id");
			return {
				title:'表单',
				path: `mine/me/Form?id=` + shopId + `&userid=` + userId, // 分享后打开的页面
				success: function(res) {
					console.log("转发成功")
				},
				fail: function(res) {
					console.log("转发失败")
				}
			}
		},
		methods: {
			scrolltolower() { //上拉加载
				this.mPage++
				this.getCardsList()
			},
			onScroll(e) {
				this.scrollTop = e.detail.scrollTop
			},
			getinfo() {
				this.$api.formgetInfo({
					id:this.id
				}).then((res) => {
					this.info = res.info

					let b = res.list
					console.log(b)
					for(let i in b){
						  b[i].type_descnew = []
						for(let k in b[i].type_desc){
							let c ={}
							c.name = b[i].type_desc[k]
							if(k == 0){
								c.isselect = false
							}else{
								c.isselect = false
							}
							b[i].type_descnew.push(c)
						}
						
					}
					console.log(b)
					this.list = b

					let a = []
					a.push(this.getimg(this.info.imgs))
					this.tulist = a
					// console.log(this.tulist)
				}).catch((e) => {
					
				})
			},
			getCardsJian(oid) {
				this.$api.getCardsJian({
					id: this.shareData.id,
					role_id:this.mRoleId
				}).then((res) => {

				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
				})
			},
			onShareClick(item) {
				this.shareData = item;
				console.log("开始分享点击")
			},
			getimg(e){
				return this.$api.getBaseUrl() + e
			},
			getgerder(e){
				this.parms.gender = e
			},
			gettijiao(){
				let json = []
				let list = this.list
				for(let i in list){
					let b = {}
					b.name = list[i].name
					b.id = list[i].id
					b.type = list[i].type
					let c = []
					for(let j in list[i].type_descnew){
						if(list[i].type_descnew[j].isselect){
							c.push(list[i].type_descnew[j].name)
						}
					}
					b.value = c.toString()
					json.push(b)
				}
				// console.log(json)
				this.parms.json = JSON.stringify(json)
				console.log(this.parms)
				this.$api.formaddForm(this.parms).then((res) => {
					uni.$u.toast('操作成功')
					setTimeout(() => {
						uni.navigateBack();
					}, 900)
				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
				})
			},
			getxuan(item,index,ind){
				let list = this.list
				if(item.type == 'radio'){
					let type_descnew = list[index].type_descnew
					for(let ins in type_descnew){
						type_descnew[ins].isselect = false
					}
					type_descnew[ind].isselect = true
					list[index].type_descnew = type_descnew
					this.list = list
				}else if(item.type == 'checkbox'){
					let type_descnew = list[index].type_descnew
					for(let ins in type_descnew){
						if(ins == ind){
							type_descnew[ins].isselect = !type_descnew[ins].isselect
						}
						
					}
					// type_descnew[ind].isselect = true
					list[index].type_descnew = type_descnew
					this.list = list
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cenV {
		// height: 100%;
		min-height: 100vh;
		background-color: #EEF0F9;
		padding-bottom: 100rpx;
		.fmiao{
			font-size: 14px;
			font-weight: normal;
			line-height: 26px;
			letter-spacing: 0px;
			color: #666666;
			padding: 30rpx;
		}
		.xmiao{
			font-size: 14px;
			font-weight: normal;
			display: block;
			margin-top: 10px;
			color: #9A9A9A;
		}
		.fda{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.daitem{
				width: 50%;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 20rpx;
				.quan{
					margin-right: 6rpx;
					width: 35rpx;
					height: 35rpx;
				}
				text{
					font-size: 16px;
					font-weight: 400;
					letter-spacing: 0px;
					color: #333333;
				}
			}
			.dtwo{
				width: 100%;
			}
			.dthree{
				width: 33.33%;
				margin-bottom: 0;
			}
		}
		.flist{
			display: flex;
			flex-direction: column;
			padding: 0rpx 30rpx 30rpx;
			.fitem{
				display: flex;
				flex-direction: column;
				margin-bottom: 20px;
				.fname{
					font-size: 16px;
					font-weight: 400;
					color: #333333;
					display: block;
					margin-bottom: 30rpx;
				}
				
			}
			.lianxi{
				padding: 20rpx;
				border-bottom: 1px dashed #D9D9D9;
				font-size: 16px;
				font-weight: 400;
				color: #333333;
				text-align: center;
			}
			.lmaio{
				font-size: 14px;
				font-weight: 400;
				display: block;
				margin-top: 10px;
				color: #999999;
			}
			.xlist{
				display: flex;
				flex-direction: column;
				margin-top: 40rpx;
				.xitem{
					display: flex;
					flex-direction: column;
					margin-bottom: 40rpx;
					.xming{
						font-size: 16px;
						font-weight: 400;
						letter-spacing: 0px;

						color: #333333;
					}

				}
				.xing{
					color: #E41414;
					position: relative;
					top: 3rpx;
					left: 3rpx;
				}
				.shuview{
					height: 40px;
					background: #FFFFFF;
					display: flex;
					padding: 0 20rpx;
					flex-direction: row;
					align-items: center;
					border: 1px solid #D3D3D3;
					margin-top: 13px;
					.ren{
						width: 15px;
						height: 13.5px;
						margin-right: 20rpx;
					}
				}
			}
		}
		.tijiao{
			margin-top: 26px;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #203280;
			font-size: 16px;
			font-weight: normal;
			height: 80rpx;
			color: #FFFFFF;
		}
	}
</style>
